<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--360浏览器优先以webkit内核解析-->
    <title>城市工地管理系统</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link
      href="../static/css/bootstrap.min.css"
      th:href="@{/css/bootstrap.min.css}"
      rel="stylesheet"
    />
    <link
      href="../static/css/font-awesome.min.css"
      th:href="@{/css/font-awesome.min.css}"
      rel="stylesheet"
    />
    <link
      href="../static/css/main/animate.min.css"
      th:href="@{/css/main/animate.min.css}"
      rel="stylesheet"
    />
    <link
      href="../static/css/main/style.min862f.css"
      th:href="@{/css/main/style.min862f.css}"
      rel="stylesheet"
    />
    <link
      href="../static/ajax/libs/layui/css/layui.css"
      th:href="@{/ajax/libs/layui/css/layui.css}"
      rel="stylesheet"
    />
    <style>
      .flex-row {
        display: flex;
      }

      .panel-left {
        flex: 1;
      }

      .panel-right {
        width: 300px;
        margin-left: 10px;
      }

      .card {
        background-color: #fff;
        padding: 5px;
        border-radius: 2px;
      }

      .title {
        display: block;
        padding: 6px 0;
        align-items: center;
        border-bottom: 1px solid #f4f4f4;
      }

      .title .fa {
        color: #fff;
        padding: 4px;
        border-radius: 2px;
        background-color: #2b8aff;
      }

      .mt10 {
        margin-top: 10px;
      }

      .wrapper-content {
        padding: 10px;
      }

      .item-list {
        padding: 10px 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .item .fa {
        padding: 10px;
        border-radius: 50%;
        font-size: 20px;
        color: #fff;
      }

      .orange {
        background-color: #ee4d2d;
      }

      .blue {
        background-color: #0474cd;
      }

      .green {
        background-color: #227444;
      }

      .pink {
        background-color: #7440eb;
      }

      .f-blue {
        color: #0474cd;
      }

      .shenpi {
        padding-top: 4px;
      }

      .shengpi-items {
        display: flex;
        width: 50%;
        border-bottom: 1px dashed #ccc;
        justify-content: center;
        padding: 26px 0;
      }

      .shengpi-items.br {
        border-right: 1px dashed #ccc;
      }

      .shengpi-items .fa {
        font-size: 30px;
        margin-right: 20px;
        color: #9dba8c;
      }

      .shenpi {
        display: flex;
        justify-content: space-around;
      }

      .shenpi-item {
        display: flex;
        flex-direction: column;
      }

      .count {
        font-size: 26px;
      }

      .desc {
        font-size: 16px;
      }

      .todo-list {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px dashed #ccc;
      }

      .todo-list .fa {
        background-color: #f4f4f4;
        border-radius: 50%;
        font-size: 18px;
        color: #626262;
        padding: 8px;
        margin-right: 15px;
      }

      .todo-item {
        display: flex;
        flex-direction: column;
      }

      .todo-main {
        color: #000;
      }

      .todo-extra {
        font-size: 12px;
        color: #999;
      }

      .content-list {
      }

      .content-list li {
        display: flex;
        justify-content: space-between;
        padding: 5px;
      }
    </style>
  </head>

  <body class="gray-bg">
    <div class="wrapper wrapper-content">
      <div class="flex-row">
        <div class="panel-left card">
          <div class="layui-carousel" id="carousel">
            <div carousel-item>
              <div><a href="http://cgw.nc.gov.cn/" target="_blank">
              	<img th:src="@{/img/banner1.png}" width="100%" height="280px" /></a></div>
              <div><a href="http://cgw.nc.gov.cn/" target="_blank">
              	<img th:src="@{/img/banner2.png}" width="100%" height="280px" /></a></div>
              <div><a href="http://cgw.nc.gov.cn/" target="_blank">
              	<img th:src="@{/img/banner3.png}" width="100%" height="280px" /></a></div>
              <div><a href="http://cgw.nc.gov.cn/" target="_blank">
              	<img th:src="@{/img/banner4.png}" width="100%" height="280px" /></a></div>
              <div><a href="http://cgw.nc.gov.cn/" target="_blank">
              	<img th:src="@{/img/banner5.png}" width="100%" height="280px" /></a></div>
            </div>
          </div>
        </div>
        <div class="panel-right card">
          <div class="title"><i class="fa fa-tag"></i> 事项审批</div>
          !<div class="shenpi">
            <span class="shengpi-items br">
              <i class="fa fa-handshake-o"></i>
              <span class="shenpi-item">
                <span class="count f-blue">37</span>
                <span class="desc">项目审批</span>
              </span>
            </span>
            <span class="shengpi-items">
              <i class="fa fa-money"></i>
              <span class="shenpi-item">
                <span class="count f-blue">37</span>
                <span class="desc">文件审批</span>
              </span>
            </span>
          </div>
          <div class="shenpi">
            <span class="shengpi-items br">
              <i class="fa fa-suitcase"></i>
              <span class="shenpi-item">
                <span class="count f-blue">37</span>
                <span class="desc">安全考核</span>
              </span>
            </span>
            <span class="shengpi-items">
              <i class="fa fa-compass"></i>
              <span class="shenpi-item">
                <span class="count f-blue">37</span>
                <span class="desc">施工进度</span>
              </span>
            </span>
          </div>
        </div>
      </div>

      <div class="flex-row mt10">
        <div class="panel-left">
          <div class="card mt10">
            <div class="title"><i class="fa fa-tag"></i> 事项中心</div>
            <div class="layui-tab">
              <ul class="layui-tab-title">
                <li class="layui-this">项目类</li>
                <li>人事类</li>
                <li>行政类</li>
                <li>资产类</li>
              </ul>
              <div class="layui-tab-content">
                 <!--<div class="layui-tab-item layui-show">
                  <ul class="content-list">
                    <li>
                      <span>西湖区广场项目-2019-10-18</span>
                      <span>张江</span>
                      <span>2019-10-18</span>
                    </li>
                    <li>
                      <span>九龙湖高铁项目-2019-8-18</span>
                      <span>张江</span>
                      <span>2019-10-18</span>
                    </li>
                    <li>
                      <span>西湖区广场项目-2019-7-18</span>
                      <span>李贺</span>
                      <span>2019-7-18</span>
                    </li>
                    <li>
                      <span>西湖区广场项目-2020-1-18</span>
                      <span>江峰</span>
                      <span>2020-1-18</span>
                    </li>
                  </ul>
                </div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
                <div class="layui-tab-item">内容5</div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="panel-right card">
          <div class="title"><i class="fa fa-tag"></i> 流程提醒</div>
          <!-- <div class="todo-list">
            <i class="fa fa-crop"></i>
            <span class="todo-item">
              <span class="todo-main">流程超时</span>
              <span class="todo-extra">您有3个流程超时</span>
            </span>
          </div>
          <div class="todo-list">
            <i class="fa fa-archive"></i>
            <span class="todo-item">
              <span class="todo-main">流程督办</span>
              <span class="todo-extra">您有3个流程需要督办</span>
            </span>
          </div>
          <div class="todo-list">
            <i class="fa fa-calendar-o"></i>
            <span class="todo-item">
              <span class="todo-main">流程反馈</span>
              <span class="todo-extra">您有3个流程有最新反馈</span>
            </span>
          </div>
          <div class="todo-list">
            <i class="fa fa-credit-card"></i>
            <span class="todo-item">
              <span class="todo-main">流程代理</span>
              <span class="todo-extra">您有3个流程被代理</span>
            </span>
          </div>
          <div class="todo-list">
            <i class="fa fa-object-group"></i>
            <span class="todo-item">
              <span class="todo-main">流程归档</span>
              <span class="todo-extra">您有10个流程未归档</span>
            </span>
          </div> -->
        </div>
      </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layui/layui.js}"></script>
    <script th:src="@{/ajax/libs/layui/element.js}"></script>
    <script>
      layui.use("carousel", function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
          elem: "#carousel",
          width: "100%", //设置容器宽度
          arrow: "always", //始终显示箭头
          //,anim: 'updown' //切换动画方式
        });
      });
    </script>
  </body>
</html>
